<template>
  <div class="order-detail-container">
    <!-- 商品列表 -->

    <van-card
        v-for="item in order.detailList"
        :key="item.id"
        :num="item.count"
        :price="item.price"
        :title="item.product_name"
        :desc="item.product_spec"
        :thumb="`${APIDomainName}${item.product_pic}`"
    />

    <!-- 订单备注 -->

    <van-cell title="订单备注" :value="order.remark" label=""/>

    <!-- 配送信息 -->

    <van-cell title="配送服务" label="快递运输,工作日、双休日与节假日均可送货"/>

    <!-- 收货地址 -->

    <van-cell title="收货地址">
      <template #label>
        <div>{{ order.receiver }} {{ order.phone }}</div>

        <div>{{ order.address }}</div>
      </template>
    </van-cell>

    <!-- 费用信息 -->

    <van-cell title="商品金额" :value="`¥${orderAmount}`"/>

    <van-cell title="运费" :value="`¥0.00`"/>

    <van-cell title="总价" :value="`¥${orderAmount}`"/>

    <!-- 去支付按钮 -->

    <div v-if="order.id && order.status == 0">
      <van-button type="primary" size="large" @click="onClickPay">去支付</van-button>
    </div>

    <!-- 删除按钮 -->

    <div v-if="order.id">
      <van-button type="danger" size="large" @click="onClickDelete">删除订单</van-button>
    </div>
  </div>
</template>

<script>
import {deleteOrderByIdAPI} from '@/api/order.js';
import {getProductDetailByIdAPI} from "../../api/product";

export default {
  data() {
    return {
      order: {detailList: []}
    };
  },

  props: ['id'],

  computed: {
    //计算一个订单的总金额

    orderAmount() {
      let amount = 0;

      this.order.detailList.forEach(item => {
        amount += item.count * item.price;
      });

      return amount.toFixed(2);
    }
  },

  //生命周期钩子函数

  created() {
    this.getOrder();
  },

  methods: {
    // 获取订单详情

    getOrder() {
      getProductDetailByIdAPI(this.id).then(result => {
        this.order = result.data;
      });
    },

    //触发支付

    onClickPay() {
      this.$toast('还未实现....');
    },

    //触发删除订单

    onClickDelete() {
      deleteOrderByIdAPI(this.id).then(() => {
        this.$toast('订单已删除');

        setTimeout(() => {
          this.$router.back();
        }, 1000);
      });
    }
  }
};
</script>

<style lang="less" scoped>
.van-card {
  margin: 10px;

  border-radius: 10px;
}

.van-card__content {
  justify-content: space-evenly;
}

.van-card__title {
  font-size: 14px;
}

.van-card__num {
  font-size: 14px;

  color: black;
}
</style>
